<template>
    <div id="NotFound">
        <div class="picWrap">
            <img src="@/assets/images/not-found.png" alt class="no-select" />
        </div>
        <div class="oper">
            <h1 class="title no-select hidden-xs-only">404 Page NotFound</h1>
            <div class="btn-wrapper">
                <router-link to="/welcome" class="button">GoHome</router-link>
            </div>
        </div>
    </div>
</template>

<script setup>

</script>

<style lang='less' >
#NotFound {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--bgColor1);
    .picWrap {
        width: 60vw;
        img {
            width: 60vw;
        }
    }

    .oper {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        flex-flow: column;
        align-items: center;
        .title {
            font-weight: 400;
        }
        .btn-wrapper {
            margin-top: 5vw;
            .button {
                padding: 0.75em 2em;
                text-align: center;
                text-decoration: none;
                color: var(--color2);
                border: 2px solid var(--bgColor3);
                font-size: 24px;
                display: inline-block;
                border-radius: 0.3em;
                -webkit-transition: all 0.2s ease-in-out;
                transition: all 0.2s ease-in-out;
                position: relative;
                overflow: hidden;
            }
            .button:before {
                content: "";
                background-color: rgba(255, 255, 255, 0.5);
                height: 100%;
                width: 3em;
                display: block;
                position: absolute;
                top: 0;
                left: -4.5em;
                -webkit-transform: skewX(-45deg) translateX(0);
                transform: skewX(-45deg) translateX(0);
                -webkit-transition: none;
                transition: none;
            }
            .button:hover {
                background-color: var(--bgColor3);
                color: var(--color2);
                border-bottom: 4px solid var(--bgColor3);
            }
            .button:hover:before {
                -webkit-transform: skewX(-45deg) translateX(13.5em);
                transform: skewX(-45deg) translateX(13.5em);
                -webkit-transition: all 0.5s ease-in-out;
                transition: all 0.5s ease-in-out;
            }
            @keyframes sheen {
                0% {
                    -webkit-transform: skewY(-45deg) translateX(0);
                    transform: skewY(-45deg) translateX(0);
                }
                100% {
                    -webkit-transform: skewY(-45deg) translateX(12.5em);
                    transform: skewY(-45deg) translateX(12.5em);
                }
            }
        }
    }
}
@media screen and (max-width: 768px) {
    .picWrap {
        width: 100vw !important;
        img {
            width: 100vw !important;
        }
    }
}
</style>
